import React from "react";
import {PlusOutlined} from '@ant-design/icons';
import BaseComponent from "../../redare/components/BaseComponent";
import {Button, Card, Col, Modal, Row} from "antd"
import FunPermission from "../../redare_components/webplatform_workbench/components/permission/FunPermission";
import {WebPage} from "../../redare_components/webplatform_workbench/utils/WorkbenchDecoratorUtil";
import DictionaryPresenter from "../../.gen/presenter/DictionaryPresenter";
import DictionaryTableComponent from "../../components/setting/dictionary/DictionaryTableComponent";
import DictionaryAddForm from "../../components/setting/dictionary/DictionaryAddForm";
import CommonPageHeader from "../../components/common/CommonPageHeader";

const routes = [
    {
        path: '/',
        breadcrumbName: '工作台',
    },
    {
        path: '/dictionary/manager',
        breadcrumbName: '数据字典',
    }
];

export default @WebPage({
    classify: '字典管理',
    id: 'com.redare.devframework.webplatform.pages.site.dictionary.DictionaryPage',
    name: '字典管理',
    webPath: '/dictionary/manager',
    webFunIds: [
        'DictionaryArgAdd',
        'DictionaryArgEdit',
        'DictionaryArgDel',
        'DictionaryArgChange',
        'DictionaryArgSort',
    ]
})
class DictionaryPage extends BaseComponent {

    constructor(props) {
        super(props);
        this.state = {
            confirmLoading: false,
            visible: false
        };
        this.dicPresenter = new DictionaryPresenter(this);
    }

    _setModalVisible(visible) {
        this.setState({visible})
    }

    _setButtonConfirmLoading(confirmLoading) {
        this.setState({confirmLoading})
    }

    _showAddDicForm(visible) {
        this._setModalVisible({visible});
    }

    //保存
    _saveDictionary() {
        this._setButtonConfirmLoading(true);
        if (this.dictionaryForm) {
            this.dictionaryForm.formRef.current.validateFields()
                .then(value => {
                    this._add(value);
                })
                .catch(err => {
                    this._setButtonConfirmLoading(false);
                })
        }
    }

    _add(value) {
        this.dicPresenter.addDictionary(value,{}, () => {
            if (this.dictionaryTable) {
                this.toastSuccess("添加成功");
                this.dictionaryTable._findDictionaryList();
                this._setButtonConfirmLoading(false);
                this._setModalVisible(false);
            }
        })
    }

    render() {
        let {visible, confirmLoading} = this.state;
        return (
            <div>
                <CommonPageHeader className="margin-bottom bg-white" title="数据字典" routes={routes}/>
                <Card bordered={false} className="margin24">
                    <FunPermission funId={"DictionaryArgAdd"}>
                        <Row gutter={24}>
                            <Col>
                                <Button type="primary" onClick={() => this._showAddDicForm(true)}
                                        icon={<PlusOutlined/>}>新增</Button>
                            </Col>
                        </Row>
                    </FunPermission>
                    <DictionaryTableComponent ref={(dic) => {this.dictionaryTable = dic}}/>
                </Card>
                <Modal
                    title="添加字典"
                    okText="保存"
                    cancelText="取消"
                    visible={visible}
                    confirmLoading={confirmLoading}
                    onOk={this._saveDictionary.bind(this)}
                    onCancel={() => this._setModalVisible(false)}
                    centered={true}
                    destroyOnClose={true}
                    maskClosable={false}
                >
                    <DictionaryAddForm ref={(form) => this.dictionaryForm = form}/>
                </Modal>
            </div>
        )
    }


}